<template>
  <div class="faultAlarm">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="right" class="conditions-form">
      <el-form-item label="" prop="alarmType">
        <el-radio-group v-model="ruleForm.alarmType">
          <el-radio-button label="today">今日警告</el-radio-button>
          <el-radio-button label="history">历史警告</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="ruleForm.deviceType" placeholder="请选择设备类型" clearable>
          <el-option label="逆变器" value="inverter"></el-option>
          <el-option label="变压器" value="transformer"></el-option>
          <el-option label="电池组" value="battery"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="告警等级" prop="alarmLevel">
        <el-select v-model="ruleForm.alarmLevel" placeholder="请选择告警等级" clearable>
          <el-option label="一级告警" value="1"></el-option>
          <el-option label="二级告警" value="2"></el-option>
          <el-option label="三级告警" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.alarmType === 'today'" label="状态" prop="status">
        <el-select v-model="ruleForm.status" placeholder="请选择状态" clearable>
          <el-option label="发生中" value="ongoing"></el-option>
          <el-option label="已结束" value="ended"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="ruleForm.alarmType === 'history'" label="起止时间" prop="timeRange">
        <el-date-picker v-model="ruleForm.timeRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
      </el-form-item>
      <el-form-item>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          查询
        </el-button>
      </el-form-item>
    </el-form>

    <div class="cont">
      <el-table :data="tableData" stripe border>
        <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="alarmLevel" label="告警等级" align="center">
          <template #default="scope">
            <el-tag :type="getAlarmLevelType(scope.row.alarmLevel)">{{ scope.row.alarmLevel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="alarmTitle" label="告警标题" align="center"></el-table-column>
        <el-table-column prop="originalAlarmTitle" label="原始告警标题" align="center"></el-table-column>
        <el-table-column prop="soe" label="SOE" align="center"></el-table-column>
        <el-table-column prop="alarmStartTime" label="告警发生时间" align="center"></el-table-column>
        <el-table-column prop="alarmEndTime" label="告警结束时间" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === '发生中' ? 'danger' : 'success'">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <Pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import Pagination from '@/components/Pagination.vue'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  alarmType: 'today', // 默认今日警告
  deviceType: '',
  alarmLevel: '',
  status: '',
  timeRange: [] as string[]
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  fetchTableData()
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const handleSizeChange = (val: number) => {
  pageSize.value = val
  fetchTableData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  fetchTableData()
}

// 获取告警等级对应的标签类型
const getAlarmLevelType = (level: string) => {
  switch (level) {
    case '一级告警': return 'danger'
    case '二级告警': return 'warning'
    case '三级告警': return 'info'
    default: return ''
  }
}

// 表格数据
const tableData = ref([
  {
    id: '1',
    deviceName: '逆变器A-01',
    alarmLevel: '一级告警',
    alarmTitle: '过温告警',
    originalAlarmTitle: '设备温度超过阈值',
    soe: 'SOE-20230515-001',
    alarmStartTime: '2023-05-15 14:30:22',
    alarmEndTime: '2023-05-15 15:20:45',
    status: '已结束'
  },
  {
    id: '2',
    deviceName: '电池组B-02',
    alarmLevel: '二级告警',
    alarmTitle: '电压异常',
    originalAlarmTitle: '电池组电压偏低',
    soe: 'SOE-20230515-002',
    alarmStartTime: '2023-05-15 10:15:36',
    alarmEndTime: '',
    status: '发生中'
  },
  {
    id: '3',
    deviceName: '变压器C-03',
    alarmLevel: '三级告警',
    alarmTitle: '油温异常',
    originalAlarmTitle: '变压器油温轻微偏高',
    soe: 'SOE-20230514-003',
    alarmStartTime: '2023-05-14 16:42:10',
    alarmEndTime: '2023-05-14 18:30:00',
    status: '已结束'
  }
])

// 获取表格数据的方法
const fetchTableData = () => {
  // 这里模拟从API获取数据
  console.log('获取表格数据', {
    page: currentPage.value,
    pageSize: pageSize.value,
    ...ruleForm
  })
  // 实际项目中会调用API
}
</script>
<style lang="scss" scoped>
.faultAlarm {
  .cont {
    min-height: calc(100vh - 2rem);
    background: #fff;
  }
}
</style>